<template>
  <div  id="maain">
    <el-button type="primary" icon="el-icon-plus" @click="punishmentVisitable=true"  style="position:absolute;top:120px;right:60px">添加处分信息</el-button>
    <el-table
      id="table"
      ref="multipleTable"
      height="600"
      width="100%"
      :data="
        punishmentlist.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      tooltip-effect="dark"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" width="55"> </el-table-column>
      <el-table-column label="处分时间" align="center">
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column prop="userId" align="center" label="员工工号" slot-scope="">
         
      </el-table-column>
      <el-table-column prop="name" align="center"  label="员工姓名" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="deptName" align="center"  label="所在部门" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="处分等级" align="center"  show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag type="danger" effect="dark">{{scope.row.punishmentLeve}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="reasons"
        label="处分原因"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>
      <el-table-column align="center" prop="fileAddress" label="处罚文件" show-overflow-tooltip>
        <template slot-scope="scope"><a href="https://www.baidu.com">{{scope.row.fileAddress}}</a></template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="添加处分记录"
      :visible.sync="punishmentVisitable"
      width="50%"
      center
    >
      <el-form
        label-width="150px"
        label-position="right"
      >
        <el-form-item prop="name" label="处分人姓名">
          <el-select
            filterable
            placeholder="请选择处分人"
            v-model="punishment.userId"
            @change="fullDept(punishment.userId)"
          >
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.name + '\t(' + item.identityCard + ')'"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="punishmentLeve" label="处分等级：">
          <el-input
            v-model="punishment.punishmentLeve"
            style="width: 300px"
            placeholder="请输入处分等级"
          ></el-input>
        </el-form-item>
        <el-form-item prop="deptName" label="所在部门：">
          <el-input
            v-model="punishment.deptName"
            style="width: 300px"
            placeholder="请输入部门"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item prop="reasons" style="width: 450px" label="处分原因：">
          <el-input
            type="textarea"
            placeholder="请输入处分原因"
            v-model="punishment.reasons"
            maxlength="30"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="处分文件："
          style="position: absolute; left: 400px; top: 80px"
        >
          <el-upload
            class="upload-demo"
            style="width: 300px"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传doc/pdf文件，且不超过5mb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="punishmentVisitable = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
    <div>
      <el-pagination
        alian="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        id="change"
        layout="total, prev, pager, next"
        :total="punishmentlist.length"
        
      >
      </el-pagination>
    </div>
  
  </div>
</template>

<script>
import api from "@/api/punishment";
import userApi from "@/api/userdoc";
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      punishmentlist: [],
      //一页几条数据
      pageSize: 20,
      punishmentVisitable: false,
      punishment: {
        punishmentLeve: "", //处分等级
        reasons: "", //处分原因
        fileAddress: "", //处分文件地址
        createTime: "", //处分时间
        deptId: "", //处分人部门id
        name: "", //处分人姓名
        userId: "", //处分人id
      },
      userList: [],
    };
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //获取列表
    getlist() {
      userApi
        .getList()
        .then((response) => {
          this.userList = response.list;
          console.log(this.userList);
        })
        .catch((err) => {
          this.$message.error("网络繁忙，请稍后重试");
        });
    },
    //自动填充部门‘
    fullDept(id) {
      for (let index = 0; index < this.userList.length; index++) {
        const element = this.userList[index];

        if (element.userId == id) {
          this.punishment.deptName = element.deptName;
          this.punishment.deptId = element.deptId;
          this.punishment.userId = element.userId;
          this.punishment.name = element.name;
          let date = new Date();
          this.punishment.createTime =
            date.getFullYear() +
            "-" +
            (date.getMonth() + 1) +
            "-" +
            date.getDate();
          this.punishment.fileAddress = "处分文件.doc";
        }
      }
    },
    submit() {
      api
        .save(this.punishment)
        .then((response) => {
          this.$notify({
            title: "成功",
            message: "以成功提交处分信息",
            type: "success",
          });
          setTimeout(() => {
            this.$router.go(0);
          }, 3000);
        })
        .catch((err) => {
          this.$message.error("网络繁忙，请稍后重试");
        });
    },
    //获取处分列表
    getPunishment() {
      api
        .getList()
        .then((response) => {
          this.punishmentlist=response.list
          console.log(response.list)
        })
        .catch((err) => {
          this.$message.error("网络繁忙，请稍后重试");
        });
    },
  },
  created() {
    this.getlist()
    this.getPunishment()
  },
};
</script>
<style scoped>
#table {
   position: absolute;
   top: 180px;
}
#searchBtn {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 20px;
  bottom: 150px;
}
#main{
  position:absolute;top:250px;
  width: 100%;
}
#change{
  position: absolute;
  right: 0; 
  top: 820px;
}
</style>
